<template>
  <CommonPanel title="重点区域视频监控" :loading="loading">
    <div
      class="box"
      style="width: 100%; height: 100%; color: #fff"
      id="playWnd"
    ></div>
  </CommonPanel>
</template>

<script setup>
import { onMounted, reactive, ref, watch,onBeforeUnmount } from "vue";
import api from "@/api/people-board.js";
import monitorOne from "../../../utils/monitorOne";
import { defineProps } from "vue";
const props = defineProps({
  dataList: Object
});


onMounted(async () => {
  await monitorOne.openDataHtml
    // 获取监控点
    const moitorData = await  api.getMonitoringPoints()
  await monitorOne.initPlugin().then(res=>{
    monitorOne.init(moitorData?.data)
  })
});

onBeforeUnmount(async () => {
  monitorOne.undataHtml();
});
</script>

<style lang="scss" scoped>
.main-box {
  display: flex;
  box-sizing: border-box;
  padding: 10px 6px;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 10px;

  & > div {
    border: 1px solid #e8ecf1;
  }
  .box-one {
    background-image: url("@/assets/jiankong.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
}
</style>
